<template>
  <div class="kanban">
    <img :src="imgList[0].img" class="imgStyle" />
    <div class="container">
      <div class="content">
        <div class="total-content">
          <div class="total-item">
            <p>{{ model.kyxm.projectTotal }}</p>
            科研项目总数
          </div>
          <div class="total-item">
            <p>{{ model.kyxm.kyTotal }}</p>
            科研人员总数
          </div>
          <div class="total-item">
            <p>{{ model.kyxm.scientificTotal }}</p>
            科研成果总数
          </div>
          <div class="total-item">
            <template v-if="isShowStrength">
              <p v-if="model.kyxm.projectVal">
                {{
                  (
                    (model.kyjf.expenditureSumAmount / model.kyxm.projectVal) *
                    100
                  ).toFixed(4)
                }}%
              </p>
            </template>
            <p v-else>--</p>
            研发投入强度
          </div>
        </div>

        <div class="content-bottom">
          <div class="content-card">
            <div class="car-title-box">
              <div class="card-title">
                <i class="card-icon xmzl"></i>科研项目总览
              </div>
            </div>
            <div class="card-line"></div>

            <div class="card-view">
              <div
                class="card-pie-chart"
                v-if="model.kyxm.beerChart && model.kyxm.beerChart.length"
              >
                <Chart
                  :key="updateKey"
                  :options="
                    getpieOptions(
                      model.kyxm.beerCount,
                      '华润啤酒',
                      model.kyxm.beerChart
                    )
                  "
                />
              </div>
              <div class="card-pie-chart" v-else>
                <el-empty :image-size="80" />
              </div>
              <div
                class="card-pie-chart"
                v-if="model.kyxm.snowChart && model.kyxm.snowChart.length > 0"
              >
                <Chart
                  :key="updateKey"
                  :options="
                    getpieOptions(
                      model.kyxm.snowCount,
                      '华润雪花',
                      model.kyxm.snowChart
                    )
                  "
                />
              </div>
              <div class="card-pie-chart" v-else>
                <el-empty :image-size="80" />
              </div>
              <div
                class="card-pie-chart"
                v-if="model.kyxm.wineChart && model.kyxm.wineChart.length > 0"
              >
                <Chart
                  :key="updateKey"
                  :options="
                    getpieOptions(
                      model.kyxm.wineCount,
                      '华润酒业',
                      model.kyxm.wineChart
                    )
                  "
                />
              </div>
              <div class="card-pie-chart" v-else>
                <el-empty :image-size="80" />
              </div>
            </div>
          </div>
          <div class="content-card kytr">
            <div class="car-title-box">
              <div class="card-title">
                <i class="card-icon tr"></i>科研投入总览
              </div>
            </div>
            <div class="card-line"></div>
            <div class="card-view">
              <div class="card-kyry">
                <p class="card-view-title">科研人员统计</p>
                <div
                  class="kyry-chart"
                  v-if="
                    model.kyxm.pesonChart && model.kyxm.pesonChart.length > 0
                  "
                >
                  <Chart :options="model.kyxm.kyryOptions" />
                </div>
              </div>
              <div class="card-kyjf">
                <p class="card-view-title">科研经费统计</p>
                <div class="kyjf-content">
                  <div class="kyjf-title">
                    <p>
                      科研预算总额<span>{{
                        model.kyjf.budgetSumAmount.toFixed(2)
                      }}</span
                      >（万元）
                    </p>
                    <p>
                      科研支出总额<span>{{
                        model.kyjf.expenditureSumAmount
                      }}</span
                      >（万元）
                    </p>
                  </div>

                  <div
                    class="kyjf-chart"
                    v-if="
                      model.kyjf.chartData &&
                      model.kyjf.chartData.length > 0 &&
                      model.kyjf.chartData[0].length > 0
                    "
                  >
                    <Chart
                      :options="
                        getKyjfOptions(model.kyjf.xAxis, model.kyjf.chartData)
                      "
                    />
                  </div>
                  <div class="kyjf-chart" v-else>
                    <el-empty :image-size="80" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-card kycg">
            <div class="car-title-box">
              <div class="card-title">
                <i class="card-icon cg"></i>科研成果总览
              </div>
            </div>
            <div class="card-line"></div>
            <div class="kycg-pie">
              <div class="kycg-pie-box">
                <div class="pie-title">
                  华润啤酒科研成果<span>{{ model.kycg.beerCount }}</span>
                </div>
                <div
                  class="pie-content"
                  v-if="model.kycg.beerChart && model.kycg.beerChart.length > 0"
                >
                  <Chart :options="getCycgOption(model.kycg.beerChart)" />
                </div>
                <div class="pie-content" v-else>
                  <el-empty :image-size="80" />
                </div>
              </div>
              <div class="kycg-pie-box">
                <div class="pie-title">
                  华润雪花科研成果<span>{{ model.kycg.snowCount }}</span>
                </div>
                <div
                  class="pie-content"
                  v-if="model.kycg.snowChart && model.kycg.snowChart.length > 0"
                >
                  <Chart :options="getCycgOption(model.kycg.snowChart)" />
                </div>
                <div class="pie-content" v-else>
                  <el-empty :image-size="80" />
                </div>
              </div>
              <div class="kycg-pie-box">
                <div class="pie-title">
                  华润酒业科研成果<span>{{ model.kycg.wineCount }}</span>
                </div>
                <div
                  class="pie-content"
                  v-if="model.kycg.wineChart && model.kycg.wineChart.length > 0"
                >
                  <Chart :options="getCycgOption(model.kycg.wineChart)" />
                </div>
                <div class="pie-content" v-else>
                  <el-empty :image-size="80" />
                </div>
              </div>
            </div>
            <div class="kycg-bar">
              <div class="kycg-bar-box">
                <div class="bar-title">专利成果统计</div>
                <div
                  class="bar-content"
                  v-if="
                    model.kycg.patentChart && model.kycg.patentChart.length > 0
                  "
                >
                  <Chart :options="model.kycg.patentOptions" />
                </div>
                <div class="bar-content" v-else>
                  <el-empty :image-size="80" />
                </div>
              </div>
              <div class="kycg-bar-box">
                <div class="bar-title">标准成果统计</div>
                <div
                  class="bar-content"
                  v-if="
                    model.kycg.standardChart &&
                    model.kycg.standardChart.length > 0
                  "
                >
                  <Chart :options="model.kycg.standarOptions" />
                </div>
                <div class="bar-content" v-else>
                  <el-empty :image-size="80" />
                </div>
              </div>
              <div class="kycg-bar-box">
                <div class="bar-title">论文成果统计</div>
                <div
                  class="bar-content"
                  v-if="
                    model.kycg.standardChart && model.kycg.paperChart.length > 0
                  "
                >
                  <Chart :options="model.kycg.paperOptions" />
                </div>
                <div class="bar-content" v-else>
                  <el-empty :image-size="80" />
                </div>
              </div>
              <div class="kycg-bar-box">
                <div class="bar-title">科技奖励成果统计</div>
                <div
                  class="bar-content"
                  v-if="
                    model.kycg.rewardsChart &&
                    model.kycg.rewardsChart.length > 0
                  "
                >
                  <Chart :options="model.kycg.rewardOptions" />
                </div>
                <div class="bar-content" v-else>
                  <el-empty :image-size="80" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="aside">
        <div class="approval-content">
          <div class="approval-title">我的审批</div>
          <div class="approval-card">
            <div
              class="card-item"
              v-for="item in tabList"
              :key="item.value"
              @click="toPath(item)"
            >
              <p :class="item.value">{{ item.count }}</p>
              {{ item.name }}
            </div>
          </div>
        </div>
        <HomeSide />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import { Chart } from "/@/components/vue-charts/index";
import { Chart } from "../../../components/vueEcharts/index";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import HomeSide from "/@/views/components/HomeSide.vue";
import img1 from "/@/assets/u15.png";
import { postBills, myApplyList, flowQueryNotify } from "/@/api/approval";
import {
  getpieOptions,
  getKyryOptions,
  getKyjfOptions,
  getCycgOption,
  getCycgBarOption
} from "./type";
import { getMonthStatistics } from "/@/api/funds";
import { postProjectTotalData, postProjectStatistics } from "/@/api/home";
import { emitter } from "/@/utils/mitt";
import { postDictList } from "/@/api/common";
import { storageLocal } from "/@/utils/storage";
const router = useRouter();
const instance = getCurrentInstance();
const updateKey = ref(0);
const isShowStrength = ref(false);
const zlOption = {
  xAxis: ["发明", "实用新型", "外观设计"],
  data: [
    [10, 20, 30],
    [5, 6, 7],
    [8, 9, 10]
  ]
};
const bzOption = {
  xAxis: [
    "国际\n标准",
    "国家\n标准",
    "行业\n标准",
    "团体\n标准",
    "企业\n标准",
    "地方\n标准"
  ],
  data: [
    [10, 20, 30, 40, 50, 60],
    [20, 30, 40, 50, 60, 70],
    [30, 40, 50, 60, 70, 80]
  ]
};
const lwOption = {
  xAxis: [
    "SCI",
    "EI",
    "中文\n核心\n刊期",
    "中文\n核心\n刊期\nSCI",
    "中文\n核心\n刊期\nEI",
    "其他"
  ],
  data: [
    [10, 20, 30, 40, 50, 60],
    [20, 30, 40, 50, 60, 70],
    [30, 40, 50, 60, 70, 80]
  ]
};
const kjOption = {
  xAxis: [
    "国家\n最高\n科学\n技术\n奖",
    "国家\n自然\n科学\n奖",
    "国家\n技术\n发明\n奖",
    "国家\n科学\n技术\n进步\n奖",
    "国际\n科学\n技术\n合作\n奖",
    "省部\n级科\n技奖",
    "其他\n级技\n奖"
  ],
  data: [
    [10, 20, 30, 40, 50, 60, 100],
    [20, 30, 40, 50, 60, 70, 100],
    [30, 40, 50, 60, 70, 80, 100]
  ]
};

const toDototal = ref<number>(0);
const doneTotal = ref<number>(0);
const selfTotal = ref<number>(0);
const readTotal = ref<number>(0);
const toReadTotal = ref<number>(0);
const imgList = [{ img: img1 }];
let reportYear = ref(new Date().getFullYear() + "");
const tabList = [
  { name: "待办", value: "todo", count: toDototal },
  { name: "待阅", value: "toread", count: toReadTotal },
  { name: "已办", value: "done", count: doneTotal },
  { name: "已阅", value: "read", count: readTotal },
  { name: "申请", value: "self", count: selfTotal }
];

const model = reactive({
  chartDefalt: [
    {
      name: "建档",
      value: 0
    },
    {
      name: "可行性研究",
      value: 0
    },
    {
      name: "立项",
      value: 0
    },
    {
      name: "实施",
      value: 0
    },
    {
      name: "验收",
      value: 0
    },
    {
      name: "后评价",
      value: 0
    }
  ],
  kyxm: {
    projectTotal: 0,
    projectVal: 0,
    kyTotal: 0,
    scientificTotal: 0,
    kyryTotal: 0,
    beerCount: 0,
    beerChart: [],
    snowCount: 0,
    snowChart: [],
    wineCount: 0,
    wineChart: [],
    pesonChart: [],
    kyryOptions: null
  },
  kyjf: {
    budgetSumAmount: 0,
    expenditureSumAmount: 0,
    xAxis: [],
    chartData: []
  },
  kycg: {
    beerCount: 0,
    snowCount: 0,
    wineCount: 0,
    beerChart: [],
    snowChart: [],
    wineChart: [],
    patentChart: [],
    standardChart: [],
    paperChart: [],
    rewardsChart: [],
    patentOptions: null,
    standarOptions: null,
    paperOptions: null,
    rewardOptions: null
  }
});

const initProjectTotalData = async year => {
  const fn = item => {
    let json = {
      name: "",
      value: item.stageTotal
    };

    switch (item.stageStatus) {
      case "0":
        json.name = "建档";
        break;
      case "1":
        json.name = "可行性研究";
        break;
      case "2":
        json.name = "立项";
        break;
      case "3":
        json.name = "实施";
        break;
      case "4":
        json.name = "验收";
        break;
      case "5":
        json.name = "后评价";
        break;
      default:
        json.name = "结束";
    }
    return json;
  };
  const { code, data } = await postProjectTotalData({ reportYear: year });
  const formatChartData = item => {
    const count1 =
      item.find(el => el.kcMemberName === "基础研究人员")?.kyTypeCount || 0;
    const count2 =
      item.find(el => el.kcMemberName === "科技研发人员-研究和技术人员")
        ?.kyTypeCount || 0;
    const count3 =
      item.find(el => el.kcMemberName === "科技管理人员")?.kyTypeCount || 0;
    const count4 =
      item.find(el => el.kcMemberName === "科技研发人员-科研项目管理人员")
        ?.kyTypeCount || 0;
    const count5 =
      item.find(el => el.kcMemberName === "科技直接服务人员")?.kyTypeCount || 0;

    return [count1, count2, count3, count4, count5];
  };
  if (code === 200) {
    model.kyxm.beerCount = 0;
    model.kyxm.snowCount = 0;
    model.kyxm.wineCount = 0;
    model.kyxm.projectTotal = data.proTotal;
    model.kyxm.kyTotal = data.sciAndComm.kyTotal;
    model.kyxm.scientificTotal = data.sciAndComm.scientificTotal;
    const beerData = data.scientificTypeCount.filter(
      el => el.companyMaxName === "华润啤酒"
    );
    const series1 = formatChartData(beerData);
    const snowData = data.scientificTypeCount.filter(
      el => el.companyMaxName === "华润雪花"
    );
    const series2 = formatChartData(snowData);
    const wineData = data.scientificTypeCount.filter(
      el => el.companyMaxName === "华润酒业"
    );
    const series3 = formatChartData(wineData);
    model.kyxm.pesonChart = [series1, series2, series3];
    model.kyxm.kyryOptions = getKyryOptions(model.kyxm.pesonChart);
    model.kyxm.beerChart = data.proStageBeerCount.map(el => {
      model.kyxm.beerCount += el.stageTotal;
      instance.proxy.$forceUpdate();
      return fn(el);
    });

    model.kyxm.snowChart = data.proStageSnowCount.map(el => {
      model.kyxm.snowCount += el.stageTotal;
      return fn(el);
    });

    model.kyxm.wineChart = data.proStageWineCount.map(el => {
      model.kyxm.wineCount += el.stageTotal;
      return fn(el);
    });
    updateKey.value += 1;
    instance.proxy.$forceUpdate();
    data.scientificTypeCount.map(el => {
      model.kyxm.kyryTotal += el.kyTypeCount;
    });
  }
};

const initStatisticsMonth = async year => {
  model.kyjf.xAxis = [];
  model.kyjf.chartData = [];
  model.kyjf.budgetSumAmount = 0;
  model.kyjf.expenditureSumAmount = 0;
  let { code, data } = await getMonthStatistics(year);
  if (code === 200) {
    data = data.sort((a, b) => b.budgetSumAmount - a.budgetSumAmount);
    let arr = [];
    data.forEach(el => {
      if (el.happenDept !== "公司合计") {
        arr.push(el);
      }
    });
    data = arr;
    data.forEach(el => {
      model.kyjf.budgetSumAmount += el.budgetSumAmount;
      model.kyjf.expenditureSumAmount += el.inputTotal;
      model.kyjf.xAxis.push(el.happenDept);
    });
    const budgetSumAmount = data.map(el => el.budgetSumAmount);
    const inputTotal = data.map(el => el.inputTotal);
    const month1 = data.map(el => el.month1);
    const month2 = data.map(el => el.month2);
    const month3 = data.map(el => el.month3);
    const month4 = data.map(el => el.month4);
    const month5 = data.map(el => el.month5);
    const month6 = data.map(el => el.month6);
    const month7 = data.map(el => el.month7);
    const month8 = data.map(el => el.month8);
    const month9 = data.map(el => el.month9);
    const month10 = data.map(el => el.month10);
    const month11 = data.map(el => el.month11);
    const month12 = data.map(el => el.month12);
    model.kyjf.chartData = [
      inputTotal,
      budgetSumAmount,
      month1,
      month2,
      month3,
      month4,
      month5,
      month6,
      month7,
      month8,
      month9,
      month10,
      month11,
      month12
    ];
  }
};

const initStatistics = async year => {
  const formatPatentData = item => {
    const count1 = item.find(el => el.patentType === "1")?.zlTotal || 0;
    const count2 = item.find(el => el.patentType === "2")?.zlTotal || 0;
    const count3 = item.find(el => el.patentType === "3")?.zlTotal || 0;
    return [count1, count2, count3];
  };
  const formatStandData = item => {
    const count1 =
      item.find(el => el.standardType === "国际标准")?.bzTotal || 0;
    const count2 =
      item.find(el => el.standardType === "国家标准")?.bzTotal || 0;
    const count3 =
      item.find(el => el.standardType === "行业标准")?.bzTotal || 0;
    const count4 =
      item.find(el => el.standardType === "团体标准")?.bzTotal || 0;
    const count5 =
      item.find(el => el.standardType === "企业标准")?.bzTotal || 0;
    const count6 =
      item.find(el => el.standardType === "地方标准")?.bzTotal || 0;
    return [count1, count2, count3, count4, count5, count6];
  };

  const formatPaperData = item => {
    const count1 = item.find(el => el.publicationType === "SCI")?.lwTotal || 0;
    const count2 = item.find(el => el.publicationType === "EI")?.lwTotal || 0;
    const count3 =
      item.find(el => el.publicationType === "中文核心期刊")?.lwTotal || 0;
    const count4 =
      item.find(el => el.publicationType === "中文核心期刊/SCI")?.lwTotal || 0;
    const count5 =
      item.find(el => el.publicationType === "中文核心期刊/EI")?.lwTotal || 0;
    const count6 = item.find(el => el.publicationType === "其它")?.lwTotal || 0;
    return [count1, count2, count3, count4, count5, count6];
  };

  const formatRewardsData = item => {
    const count1 = item.find(el => el.rewardsType === "1")?.jlTotal || 0;
    const count2 = item.find(el => el.rewardsType === "2")?.jlTotal || 0;
    const count3 = item.find(el => el.rewardsType === "3")?.jlTotal || 0;
    const count4 = item.find(el => el.rewardsType === "4")?.jlTotal || 0;
    const count5 = item.find(el => el.rewardsType === "5")?.jlTotal || 0;
    const count6 = item.find(el => el.rewardsType === "6")?.jlTotal || 0;
    const count7 = item.find(el => el.rewardsType === "7")?.jlTotal || 0;
    return [count1, count2, count3, count4, count5, count6, count7];
  };

  const { code, data } = await postProjectStatistics({ reportYear: year });
  if (code === 200) {
    let zlLwBzJlTotal = data.zlLwBzJlTotal;
    model.kycg.beerCount =
      zlLwBzJlTotal.beerPaperTotal +
      zlLwBzJlTotal.beerPatentTotal +
      zlLwBzJlTotal.beerRewardsTotal +
      zlLwBzJlTotal.beerStandardTotal;
    model.kycg.beerChart = [
      { name: "专利", value: zlLwBzJlTotal.beerPatentTotal },
      { name: "标准", value: zlLwBzJlTotal.beerStandardTotal },
      { name: "论文", value: zlLwBzJlTotal.beerPaperTotal },
      { name: "科技奖励", value: zlLwBzJlTotal.beerRewardsTotal }
    ];
    model.kycg.snowCount =
      zlLwBzJlTotal.snowPaperTotal +
      zlLwBzJlTotal.snowPatentTotal +
      zlLwBzJlTotal.snowRewardsTotal +
      zlLwBzJlTotal.snowStandardTotal;
    model.kycg.snowChart = [
      { name: "专利", value: zlLwBzJlTotal.snowPatentTotal },
      { name: "标准", value: zlLwBzJlTotal.snowStandardTotal },
      { name: "论文", value: zlLwBzJlTotal.snowPaperTotal },
      { name: "科技奖励", value: zlLwBzJlTotal.snowRewardsTotal }
    ];
    model.kycg.wineCount =
      zlLwBzJlTotal.winePaperTotal +
      zlLwBzJlTotal.winePatentTotal +
      zlLwBzJlTotal.wineRewardsTotal +
      zlLwBzJlTotal.wineStandardTotal;
    model.kycg.wineChart = [
      { name: "专利", value: zlLwBzJlTotal.winePatentTotal },
      { name: "标准", value: zlLwBzJlTotal.wineStandardTotal },
      { name: "论文", value: zlLwBzJlTotal.winePaperTotal },
      { name: "科技奖励", value: zlLwBzJlTotal.wineRewardsTotal }
    ];
    const beerData = data.patentTypeByCmpy.filter(
      el => el.zlComMaxCode === "1"
    );
    const series1 = formatPatentData(beerData);
    const snowData = data.patentTypeByCmpy.filter(
      el => el.zlComMaxCode === "2"
    );
    const series2 = formatPatentData(snowData);
    const wineData = data.patentTypeByCmpy.filter(
      el => el.zlComMaxCode === "3"
    );
    const series3 = formatPatentData(wineData);
    model.kycg.patentChart = [series1, series2, series3];
    model.kycg.patentOptions = getCycgBarOption(
      zlOption.xAxis,
      model.kycg.patentChart
    );

    const beerData2 = data.standardTypeByCmpy.filter(
      el => el.bzComMaxCode === "1"
    );
    const series12 = formatStandData(beerData2);
    const snowData2 = data.standardTypeByCmpy.filter(
      el => el.bzComMaxCode === "2"
    );
    const series22 = formatStandData(snowData2);
    const wineData2 = data.standardTypeByCmpy.filter(
      el => el.bzComMaxCode === "3"
    );
    const series32 = formatStandData(wineData2);
    model.kycg.standardChart = [series12, series22, series32];
    model.kycg.standarOptions = getCycgBarOption(
      bzOption.xAxis,
      model.kycg.standardChart
    );

    const beerData3 = data.paperTypeByCmpy.filter(
      el => el.lwComMaxCode === "1"
    );
    const series13 = formatPaperData(beerData3);
    const snowData3 = data.paperTypeByCmpy.filter(
      el => el.lwComMaxCode === "2"
    );
    const series23 = formatPaperData(snowData3);
    const wineData3 = data.paperTypeByCmpy.filter(
      el => el.lwComMaxCode === "3"
    );
    const series33 = formatPaperData(wineData3);
    model.kycg.paperChart = [series13, series23, series33];
    model.kycg.paperOptions = getCycgBarOption(
      lwOption.xAxis,
      model.kycg.paperChart
    );

    const beerData4 = data.rewardsTypeByCmpy.filter(
      el => el.jlComMaxCode === "1"
    );
    const series14 = formatRewardsData(beerData4);
    const snowData4 = data.rewardsTypeByCmpy.filter(
      el => el.jlComMaxCode === "2"
    );
    const series24 = formatRewardsData(snowData4);
    const wineData4 = data.rewardsTypeByCmpy.filter(
      el => el.jlComMaxCode === "3"
    );
    const series34 = formatRewardsData(wineData4);
    model.kycg.rewardsChart = [series14, series24, series34];
    model.kycg.rewardOptions = getCycgBarOption(
      kjOption.xAxis,
      model.kycg.rewardsChart
    );
  }
};

const getTableData = async val => {
  const formSearch = {
    billName: "",
    busCategoryCode: "",
    createUserNameLike: "",
    createTimeStrStart: "",
    createTimeStrEnd: "",
    flowStatus: val,
    pageSize: 1,
    pageNum: 1
  };
  const { code, data } = await postBills(formSearch);
  if (code === 200) {
    if (val == "4") {
      doneTotal.value = data.rows;
    } else if (val == "5") {
      toDototal.value = data.rows;
    }
  }
};

const getMyApplyList = async () => {
  const formSearch = {
    billName: "",
    busCategoryCode: "",
    createUserNameLike: "",
    createTimeStrStart: "",
    createTimeStrEnd: "",
    pageSize: 10,
    pageNum: 1
  };
  const { code, data } = await myApplyList(formSearch);
  if (code === 200) {
    selfTotal.value = data.rows;
  }
};

//查询待阅，已阅数量
const getFlowQueryNotify = async feedback => {
  const formSearch = {
    accepter: storageLocal.getItem("rdms-info")?.userId,
    feedback: feedback,
    billNameLike: "",
    projectNameLike: "",
    pageNum: 1,
    pageSize: 10
  };
  const { code, data } = await flowQueryNotify(formSearch);
  if (code === 200) {
    if (feedback === "Y") {
      //已阅
      readTotal.value = data.rows;
    } else if (feedback === "N") {
      //待阅
      toReadTotal.value = data.rows;
    }
  }
};

const toPath = async item => {
  router.push(`/approval/${item.value}`);
  // let a = 'eyJiaWxsTmFtZSI6IiIsImJ1c0NhdGVnb3J5Q29kZSI6IiIsImNyZWF0ZVVzZXJOYW1lTGlrZSI6IiIsImNyZWF0ZVRpbWVTdHJTdGFydCI6IiIsImNyZWF0ZVRpbWVTdHJFbmQiOiIiLCJmbG93U3RhdHVzIjoiNSIsInBhZ2VTaXplIjoxMCwicGFnZU51bSI6MSwiaW5zdGFuY2VJZCI6IjEwMTU0OSJ9'

  // router.push(`/approval/todo/?runLinkParam${a}runLinkParam`);
};
const initTypeList = async () => {
  try {
    const params = {
      dicType: "rd_input_intensity"
    };
    const { code, data } = await postDictList(params);
    if (code === 200) {
      const target = data.find(el => el.dicCode === reportYear.value);
      if (target) {
        model.kyxm.projectVal = target.dicValue;
        isShowStrength.value = true;
      } else {
        isShowStrength.value = false;
      }
    }
  } catch (err) {
    console.log(err);
  }
};

// emitter.emit("changeYear", item);
onMounted(() => {
  initTypeList();
  getTableData("4");
  getTableData("5");
  getMyApplyList();
  getFlowQueryNotify("Y");
  getFlowQueryNotify("N");
  initStatisticsMonth(reportYear.value);
  initProjectTotalData(reportYear.value);
  initStatistics(reportYear.value);
  emitter.on("changeYear", year => {
    reportYear.value = year;
    initTypeList();
    initStatisticsMonth(year);
    initProjectTotalData(year);
    initStatistics(year);
  });
});
</script>

<style lang="scss" scoped>
.imgStyle {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 0 10px;

  .content {
    flex: 1;

    width: 100%;
    height: 100%;
    overflow-x: hidden;

    .content-bottom {
      padding: 0;

      .tab-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgba(79, 157, 255, 0.05);
        padding: 10px 20px;

        .list-box-card {
          font-size: 14px;
          width: 18%;
          text-align: center;
          cursor: pointer;
        }
      }
    }

    .search-wrap {
      width: 100%;
      height: 50px;
      padding-top: 10px;

      .top-wrap {
        display: flex;
        justify-content: center;
        align-items: center;

        .btn-margin {
          margin-left: 10px;
        }
      }
    }

    :deep {
      .el-card {
        border: none;
        box-shadow: none;

        .el-card__body {
          padding: 10px;
        }
      }
    }

    &-bottom {
      padding: 16px;
      width: 100%;
    }
  }

  .aside {
    width: 300px;
    min-height: 1000px;
    padding: 0 8px;
    // position: absolute;
    // right: 0;
    // top: 0;
  }
}

.header-title {
  font-size: 20px;
  position: relative;

  & > p {
    display: inline-block;
    font-size: 16px;
  }

  :deep .year-picker {
    position: absolute;
    right: 0;
    width: 100px;

    .el-input__inner {
      border: none;
      background: rgba(248, 156, 52, 0.05);
      border-radius: 4px;
      color: #f89c34;
    }

    .el-input__prefix {
      color: #f89c34;
    }
  }
}

.el-divider--horizontal {
  margin: 10px 0;
}

.title-card-title {
  color: $defaultColor;
  white-space: nowrap;
  // padding-bottom: 10px;
  // padding-top: 10px;
}

.basic_li {
  li {
    .item {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background: #cbdcff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #0c045d;

      .item-top {
        text-align: center;
        font-size: 16px;
      }

      .item-bottom {
        text-align: center;
        font-size: 14px;
      }
    }
  }
}

.develop {
  height: 100px;
  border-radius: 8px;
  background: #cbdcff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;

  .develop_top {
    color: #0c045d;
    font-size: 20px;
    text-align: center;
  }

  .develop_bottom {
    font-size: 16px;
    text-align: center;
  }
}

.pie-box-card {
  :deep .el-card__body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .pie-box {
    flex: 1;
  }
}

.title-card-projectNum {
  // display: grid;
  // grid-template-columns: repeat(3, 1fr);
  // grid-template-rows: 1;
  // gap: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  // height: 60px;
  @extend .basic_li;

  li {
    flex: 1;
    width: calc((100% - 20px) / 3);
    min-width: calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
    margin-right: 10px;

    &:nth-child(3n) {
      margin-right: 0;
    }

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      margin-bottom: 10px;
    }
  }

  li .item {
    height: 42px;
    width: 100%;
    border-radius: 8px;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #0c045d;
    overflow: hidden;
    margin-top: 4px;

    .item-top {
      padding-bottom: 4px;
      text-align: center;
      font-size: 16px;
    }

    .item-bottom {
      padding-top: 4px;
      text-align: center;
      font-size: 14px;
      border-top: 1px solid rgba(248, 156, 52, 0.4);
    }

    .item-bottom {
      max-width: 100%;
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.title-card-developNum {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1;
  gap: 10px;
  width: 100%;
  height: 60px;
  @extend .basic_li;
}

.title-card-homePieList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1;
  gap: 10px;
  width: 100%;
  height: 60px;
  @extend .basic_li;
}

.title-card-otherNum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1;
  gap: 10px;
  width: 100%;
  height: 60px;
  @extend .basic_li;
}

.title-card {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1;
  gap: 10px;
  width: 100%;
  height: 100px;
  @extend .basic_li;
}

.kanban {
  background: #08132a;

  .approval-title {
    text-align: center;
    width: 100%;
    height: 28px;
    line-height: 28px;
    background: rgba(165, 170, 240, 0.22);
    font-size: 14px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #c5e9fd;
  }

  .approval-card {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    gap: 4px;
  }

  .card-item {
    flex: 1;
    text-align: center;
    height: 52px;
    line-height: 24px;
    background: rgba(63, 65, 92, 0.3);
    border: 1px solid rgba(108, 146, 255, 0.36);
    font-size: 14px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #c5e9fd;
    cursor: pointer;

    p {
      font-size: 20px;
      color: #5298ff;
      font-weight: 0;
    }

    .todo {
      color: #ffc069;
    }
  }

  .total-content {
    display: flex;
    gap: 8px;

    .total-item {
      flex: 1;
      text-align: center;
      height: 88px;
      line-height: 30px;
      background: rgba(63, 65, 92, 0.3);
      border: 1px solid rgba(108, 146, 255, 0.36);
      font-size: 16px;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #c5e9fd;
      cursor: pointer;

      p {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #b5f2ff;
        line-height: 33px;
        text-shadow: -1px 0px 6px #26d5f9;
        margin-top: 6px;
      }
    }
  }
}

.content-card {
  margin-top: 34px;
  width: 100%;
  height: 230px;
  background: rgba(63, 65, 92, 0.3);
  border: 1px solid rgba(108, 146, 255, 0.36);
  position: relative;

  .car-title-box {
    position: absolute;
    top: -22px;
    left: 16px;
    background: #021d39;
    z-index: 999;
  }

  .card-title {
    font-size: 20px;
    font-family: HYQiHei-FEJ, HYQiHei;
    font-weight: normal;
    color: #88c4f8;
    line-height: 23px;
    background: linear-gradient(261deg, #acc0fa 0%, #6a90fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .card-icon {
      width: 19px;
      height: 19px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
    }

    .xmzl {
      background: url(../../../assets/v2/xmzl.png) no-repeat;
      background-size: 19px 19px;
    }

    .tr {
      background: url(../../../assets/v2/tr.png) no-repeat;
      background-size: 19px 19px;
    }

    .cg {
      background: url(../../../assets/v2/cg.png) no-repeat;
      background-size: 19px 19px;
    }
  }

  .card-line {
    position: absolute;
    top: -40px;
    left: 171px;
    width: 420px;
    height: 52px;
    background: url(../../../assets/v2/line.png) no-repeat;
    background-size: 420px 52px;
  }

  .card-view {
    display: flex;
    height: 100%;
  }

  .card-pie-chart {
    flex: 1;
    height: 100%;

    .chart {
      width: 100%;
      height: 100%;
    }
  }

  .card-kyry {
    width: 40%;
    height: 100%;
  }

  .card-kyjf {
    flex: 1;
  }

  .card-view-title {
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #9dcbf9;
    line-height: 24px;
    -webkit-background-clip: text;
    margin-top: 22px;
    margin-left: 22px;

    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 16px;
      background: linear-gradient(261deg, #acc0fa 0%, #6a90fe 100%);
      vertical-align: middle;
      margin-right: 8px;
    }
  }

  .kyry-chart {
    width: 100%;
    height: 100%;

    .chart {
      width: 100%;
      height: 100%;
    }
  }

  .kyjf-content {
    height: calc(100% - 62px);
    margin-top: 14px;
    padding: 0 22px;
  }

  .kyjf-chart {
    width: 100%;
    height: calc(100% - 58px);

    .chart {
      width: 100%;
      height: 100%;
    }
  }

  .kyjf-title {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;

    p {
      flex: 1;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: #242944;
      border: 1px solid #e3eafd23;
      font-size: 16px;
      font-family: SourceHanSansCN-Bold, SourceHanSansCN;
      font-weight: bold;
      color: #ffffff;
      background: linear-gradient(135deg, #c5e9fd 0%, #96beff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      span {
        margin: 0 8px;
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #b5f2ff;
        text-shadow: -1px 0px 6px #26d5f9;
      }
    }
  }
}

.kycg-pie {
  padding-top: 20px;
  display: flex;

  .kycg-pie-box {
    padding: 0 21px;
    flex: 1;

    .pie-title {
      height: 52px;
      line-height: 44px;
      text-align: center;
      font-size: 16px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #9dcbf9;
      background: url(../../../assets/v2/kline.png) no-repeat;
      background-size: 100% 52px;

      span {
        margin: 0 8px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #b5f2ff;
        text-shadow: -1px 0px 6px #26d5f9;
      }
    }

    .pie-content {
      width: 100%;
      height: 200px;
      background: url(../../../assets/v2/pie-bg.png) no-repeat;
      background-position: 50%;
    }
  }
}

.kycg-bar {
  display: flex;

  .kycg-bar-box {
    flex: 1;
    padding-left: 21px;

    &:last-child {
      padding-right: 21px;
    }
  }

  .bar-title {
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #9dcbf9;
    line-height: 24px;
    -webkit-background-clip: text;
    margin-left: 14px;

    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 16px;
      background: linear-gradient(261deg, #acc0fa 0%, #6a90fe 100%);
      vertical-align: middle;
      margin-right: 8px;
    }
  }

  .bar-content {
    margin-top: 22px;
    width: 100%;
    height: 280px;
  }
}

.chart {
  width: 100%;
  height: 100%;
}

.kytr {
  height: 318px;
}

.kycg {
  height: 620px;
}
</style>
